<!-- 客户端资讯详情 -->
<template>
    <div id="articleDetail">
        <div class="title">{{ articleDetail.title }}</div>
        <div class="intro">
            <span>{{ articleDetail.date }}</span>
        </div>
        <div class="content" v-html="articleDetail.content"></div>
    </div>
</template>

<script>
import {getArticleDetail} from "../api/index";
import dayjs from "dayjs";
import {imgPath} from "../script/utils";

export default {
    data() {
        return {
            articleDetail: {
                title: "",
                time: "",
                content: "",
            },
        };
    },
    mounted() {
        this.getArticleDetail();
    },
    methods: {
        async getArticleDetail() {
            let {newsId = '',stockId = '',kcType = ''} = this.$route.query;

            await getArticleDetail({newsId,stockId,kcType}).then((back) => {
                if (back.status == 1) {
                    let {title,publDate,content} = back.data;

                    this.articleDetail = {
                        title,
                        date: dayjs(publDate).format("YYYY-MM-DD HH:mm"),
                        content: imgPath(content),
                    };
                }
            });
        },
    },
};
</script>
<style>
.content img {
    display: block;
    max-width: 90% !important;
}
</style>
<style lang="scss" scoped>
#articleDetail {
    margin: 0 auto;
    padding: 24px 28px;
    max-width: 1200px;
    user-select: none;

    img {
        max-width: 100%;
    }

    .title {
        color: #dddddd;
        font-size: 20px;
        font-weight: bold;
        line-height: 42px;
        text-align: center;
    }

    .intro {
        text-align: center;
        color: #cccccc;
        line-height: 42px;
        border-bottom: 1px solid #1c1d21;
        margin-bottom: 20px;

        span {
            margin-right: 5px;
            font-size: 14px;
        }
    }

    .content {
        color: #b2b6c7;
        font-size: 16px;
        font-weight: 400;
        line-height: 28px;
        word-break: break-all;
    }
}
</style>
